<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>推箱子</title>
	<style type="text/css">
		html, body{
			height: 100%;
		}
		.root-body{
			text-align: center;
			overflow: hidden;
		}
		#canvas {
			margin-top: 10px;
			border: 1px solid aquamarine;
		}
		.btn-group {
			margin-top: 20px;
			text-align: center;
		}
		.btn-group>div{
			display: inline-block;
		}
		.btn {
			width: 100px;
			background: deepskyblue;
			box-shadow: 1px 1px 2px 2px #c3c7c7;
			-webkit-box-shadow: 1px 1px 2px 2px #c3c7c7;
			border-radius: 4px;
			margin: 10px;
			padding: 10px;
		}
		.btn:hover{
			cursor: pointer;
		}
		.btn:active{
			margin-left: 14px;
			margin-top: 13px;
			box-shadow: 0px 0px rgba(0, 0, 0, 0.5);
			-webkit-box-shadow: 0px 0px rgba(0, 0, 0, 0.5);
		}
	</style>
</head>
<body class="root-body" onkeydown="onKeyDown(event);">
	<canvas id="canvas" width="700" height="500">
		您的浏览器不支持
	</canvas>
	<div class="btn-group">
		<div class="btn" onclick="nextGame();">下一局</div>
		<div class="btn" onclick="reStart();">重新开始</div>
	</div>
<script type="text/javascript" src="map.js"></script>
<script type="text/javascript">
	/*
	 * 0  空白
	 * 1  墙        wall
	 * 2  乌龟    tor
	 * 3 箱子     box
	 * 4 目的地 aim
	 * */
	let body = document.getElementsByTagName('body')[0];
	body.addEventListener('touchstart', touchStart, false);
	body.addEventListener('touchend', touchEnd, false);
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var M = new Map();
	var map,aimmap;
	var level = 1;
	var isWin = false;
	var wallImg = new Image(),
		torImg = new Image(),
		boxImg = new Image(),
		aimImg = new Image();
	wallImg.src = "images/wall.png";
	torImg.src = "images/tortoise.png";
	boxImg.src = "images/box.png";
	aimImg.src = "images/aims.png";
	var imgs = [wallImg,torImg,boxImg,aimImg];
	loadImg(imgs,function(){
		startGame();
	});
	function loadImg(sources, callback){
		var count=0,
			imgNum = sources.length,
			i;
		for(i=0; i < imgNum; i++){
			sources[i].onload = function(){
				if(++count >= imgNum)
					callback();
			}
		}
	}
	function startGame(){
		isWin = false;
		map = M.getMap(level);
		//采用深度复制
		aimmap = new Array();
		var i;
		for(i=0; i<map.length; i++){
			aimmap[i] = map[i].concat();
		}
		drawMap();
	}
	function drawMap(){
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.beginPath();
		var i,j;
		for(i=0;i<aimmap.length;i++){
			for(j=0;j<aimmap[i].length;j++){
				if(aimmap[i][j] === 4)
					ctx.drawImage(aimImg, j*wallImg.width, i*wallImg.height, wallImg.width, wallImg.height);
			}
		}
		for(i=0;i<map.length;i++){
			for(j=0;j<map[i].length;j++){
				if(map[i][j] === 1)
					ctx.drawImage(wallImg, j*wallImg.width, i*wallImg.height, wallImg.width, wallImg.height);
				if(map[i][j] === 2)
					ctx.drawImage(torImg, j*wallImg.width, i*wallImg.height, wallImg.width, wallImg.height);
				if(map[i][j] === 3)
					ctx.drawImage(boxImg, j*wallImg.width, i*wallImg.height, wallImg.width, wallImg.height);
				if(map[i][j] === 4)
					ctx.drawImage(aimImg, j*wallImg.width, i*wallImg.height, wallImg.width, wallImg.height);
				if(map[i][j] === 5)
					ctx.drawImage(boxImg, j*wallImg.width, i*wallImg.height, wallImg.width, wallImg.height);
			}
		}
		ctx.closePath();
	}
	let g_point = {
		x: 0,
		y: 0
	} 
	function touchStart(e){
		e.preventDefault();
		let touch = e.touches[0];
		g_point.x = touch.clientX;
		g_point.y = touch.clientY;
	}
	function touchEnd(e){
		e.preventDefault();
		let end = e.changedTouches[0];
		let x = end.clientX - g_point.x;
		let y = end.clientY - g_point.y;
		if(Math.abs(x) > Math.abs(y)){
			if(x > 0){
				moveTor('RIGHT');
			}else{
				moveTor('LEFT');
			}
		}else{
			if(y > 0){
				moveTor('DOWN');
			}else{
				moveTor('UP');
			}
		}

		g_point = {
			x: 0,
			y: 0
		} 
	}
	function onKeyDown(event){
		if(isWin) return;
		if(event.which === 37){//left
	    	moveTor('LEFT');
	   	}
		if(event.which === 38){//DOWN
	    	moveTor('UP');
	    }
	    if(event.which === 39){//right
	    	moveTor('RIGHT');
	    }
	    if(event.which === 40){//down
	    	moveTor('DOWN');
	    }
	}

	function moveTor(dir){
		var pos = getTorLocation();
		var i = pos.i;
		var j = pos.j;
		if(dir === "UP"){
			if(map[i-1][j] === 1){
				return false;
			}
			if(map[i-1][j] === 3){
				if(map[i-2][j] === 1 || map[i-2][j] === 3){
					return false;
				}
				map[i-2][j] = 3;
				map[i-1][j] = 2;
				map[i][j] = 0;
			}
			else{
				map[i-1][j] = 2;
				map[i][j] = 0;
			}
		}
		if(dir === "DOWN"){
			if(map[i+1][j] === 1){
				return false;
			}
			if(map[i+1][j] === 3){
				if(map[i+2][j] === 1 || map[i+2][j] === 3){
					return false;
				}
				map[i+2][j] = 3;
				map[i+1][j] = 2;
				map[i][j] = 0;
			}else{
				map[i+1][j] = 2;
				map[i][j] = 0;
			}
		}
		if(dir === "LEFT"){
			if(map[i][j-1] === 1){
				return false;
			}
			if(map[i][j-1] === 3){
				if(map[i][j-2] === 1 || map[i][j-2] === 3){
					return false;
				}
				map[i][j-2] = 3;
				map[i][j-1] = 2;
				map[i][j] = 0;
			}else{
				map[i][j-1] = 2;
				map[i][j] = 0;
			}
		}
		if(dir === "RIGHT"){
			if(map[i][j+1] === 1){
				return false;
			}
			if(map[i][j+1] === 3){
				if(map[i][j+2] === 1 || map[i][j+2] === 3){
					return false;
				}
				map[i][j+2] = 3;
				map[i][j+1] = 2;
				map[i][j] = 0;
			}else{
				map[i][j+1] = 2;
				map[i][j] = 0;
			}
		}
		
		drawMap();
		if(isFinish()){
			drawMap();
			if(confirm("你赢了，是否继续？")){
				nextGame();
			}
		}
	}
	function getTorLocation(){
		var i,j;
		for(i=0;i<map.length;i++){
			for(j=0;j<map[i].length;j++){
				if(map[i][j] === 2){
					return {i:i,j:j};
				}
			}
		}
	}
	function isFinish(){
		for(i=0;i<aimmap.length;i++){
			for(j=0;j<aimmap[i].length;j++){
				if(aimmap[i][j] === 4){
					if(map[i][j] !== 3){
						return false;
					}
				}
			}
		}
		isWin = true;
		return true;
	}
	function reStart(){
		isWin = false;
		map = new Array();
		var i;
		for(i=0; i<aimmap.length; i++){
			map[i] = aimmap[i].concat();
		}
		drawMap();
	}
	function nextGame(){
		if(++level > M.maps.length)
			level = 1;
		startGame(level);
	}
</script>
</body>
</html>
